<template>
  <div class="cardBox" style="overflow-x: hidden;" v-loading="tableLoading">
    <el-row :gutter="25">
      <template v-for="(item,index) in tableData">
        <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4" :key="index">
          <div class="card" :class="[item.recipeStatus ? statusStyle(item.recipeStatus) : '', index == cardIndex ? 'selectCard' : '']"
            @click="handleIndex(index,item)">
            <p class="title">{{item.recipeName + ' ' + item.version}}</p>
            <p class="time">{{$t('recipe.material_code')}}：{{item.item}}</p>
            <p class="time">{{$t('recipe.yield')}}：{{item.itemQty}}（ {{item.uomId}} ）</p>
            <p class="time">{{$t('common.create_time')}}：{{item.fCreatorTime}}</p>
          </div>
        </el-col>
      </template>
      <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cardIndex: -1
    }
  },
  props: {
    tableData: Array,
    tableLoading: Boolean,
  },
  created () {

  },
  watch: {
    'tableData.length': {
      handler (newValue, oldValue) {
        if (newValue !== oldValue) {
          this.cardIndex = -1
        }
      }
    }
  },
  methods: {
    handleIndex (index, row) {
      this.cardIndex = index
      let obj = {
        row: row,
        radioId: row.fid
      }
      this.$emit("handleEdit", obj)
    },
    statusStyle (recipeStatus) {
      return 'borderLeft' + recipeStatus
    },
  }
}
</script>

<style scoped>
.card {
  background: #eaebec;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 3px;
}
.card p {
  font-size: 12px;
  line-height: 22px;
  transform: scale(0.9);
}
.desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  font-weight: bold;
}
.borderLeft1 {
  border-left: 8px solid #00cc99;
}
.borderLeft2 {
  border-left: 8px solid #2e75b5;
}
.borderLeft3 {
  border-left: 8px solid #00ff00;
}
.borderLeft4 {
  border-left: 8px solid #5b9bd5;
}
.borderLeft5 {
  border-left: 8px solid #ffff00;
}
.borderLeft6 {
  border-left: 8px solid #f4b183;
}
.cardBox {
  max-height: calc(100vh - 234px);
  overflow-y: auto;
}
.selectCard {
  background: #f6fbff;
}
@media only screen and (min-width: 1200px) {
  .el-col-lg-5 {
    width: 19.83333%;
  }
}
</style>